<template>
  <div class="admin_all">
    <admin_top></admin_top>
    <div class="t_btn_box">
      <el-button @click="createwindow" size="small" type="danger">创建支付订单</el-button>
      <div>
        <el-input style="width:180px" size="small" v-model="shopname" placeholder="请输入店铺名称"></el-input>
        <el-select clearable @change="searchchange" style="width:180px" v-model="item_type" size="small"
          placeholder="请选择项目类型">
          <el-option label="自动生产接口" value="1"></el-option>
          <el-option label="H5定制" value="2"></el-option>
          <el-option label="定制开发" value="3"></el-option>
		  <el-option label="抓单对接" value="4"></el-option>
        </el-select>

        <el-select clearable style="width:180px" v-model="status" size="small"
          placeholder="请选择状态">
          <el-option :label="item.name" :value="item.code" v-for="item in statuslist" :key="item"></el-option>

        </el-select>

        <el-button @click="search" size="small" type="danger">搜索</el-button>
        <el-button @click="daochu" size="small" type="danger" style="margin-left: 30px;">导出</el-button>
      </div>
    </div>
    <div class="t_table_box">
      <el-table :data="tableData">
        <el-table-column prop="name" label="店铺名称">
        </el-table-column>
        <el-table-column prop="id" label="订单id">
        </el-table-column>
        <el-table-column prop="item_name" label="项目名称">
        </el-table-column>
        <el-table-column prop="item_type_name" label="项目类型">
        </el-table-column>
        <el-table-column prop="shop_id" label="店铺Id">
        </el-table-column>
        <el-table-column prop="total" label="价格">
        </el-table-column>
        <el-table-column prop="created_at" label="时间">
        </el-table-column>
        <el-table-column prop="pay_status_name" label="支付状态">
        </el-table-column>
        <el-table-column prop="updated_at" label="支付时间">
        </el-table-column>
        <el-table-column prop="status_name" label="对接状态">
        </el-table-column>
        <el-table-column prop="updated_at" label="更新时间">
        </el-table-column>
        <el-table-column prop="remark" label="支付备注">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == -100" @click="handleClick(scope.row.id)" type="text" size="small">删除
            </el-button>
            <el-button @click="xiugaibeizhu(scope.row.id,scope.row.remark)" type="text" size="small">修改备注</el-button>
            <el-button @click="xiugaizhuangtai(scope.row.id,scope.row.status)" type="text" size="small">修改状态</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!-- 创建支付订单 -->
    <el-dialog title="创建支付订单" :visible.sync="createzf" width="600px">
      <el-form label-width="80px">
        <el-form-item label="支付店铺">
          <el-input v-model="addinfo.shop_name" @blur="checkshop"></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="addinfo.item_name"></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select v-model="addinfo.item_type" style="width:100%" placeholder="请选择">
            <el-option label="自动生产接口" value="1"></el-option>
            <el-option label="H5定制" value="2"></el-option>
            <el-option label="定制开发" value="3"></el-option>
			<el-option label="抓单对接" value="4"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="addinfo.amount"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" plain @click="createzf = false">取 消</el-button>
        <el-button type="danger" @click="adddd">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改状态" :visible.sync="xiugaizhuangtailog" width="600px">
      <el-select clearable style="width:180px" v-model="xiugai.status" size="small"
        placeholder="请选择状态">
        <el-option :label="item.name" :value="item.code" v-for="item in statuslist" :key="item"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" plain @click="xiugaizhuangtailog = false">取 消</el-button>
        <el-button type="danger" @click="xiugaigo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import admin_top from './top.vue';
  import axios from "axios";
  export default {
    components: {
      admin_top
    },
    data() {
      return {
        tableData: [],
        //创建订单页面是否显示
        createzf: false,
        //搜索内容
        item_type: '',
        //搜索店铺名称
        shopname: '',
        statuslist:[],
        status:"",
        xiugaizhuangtailog:false,
        //添加数据
        addinfo: {
          shop_name: '',
          item_name: '',
          item_type: '',
          amount: ''
        },
        xiugai:{
          id:"",
          status:""
        }
      };
    },
    mounted() {
      //获取列表
      this.getlist()
      //获取状态列表
      axios.get('/api/plan-market/admin/upstream/channel/order/status/list')
        .then((response) => {
          this.statuslist = response.data.data
        })
    },
    methods: {
      daochu:function(){
        axios.get('/api/plan-market/admin/upstream/channel/order/export')
          .then((response) => {
            if (response.data.msg.code == 0) {
              window.location.href = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      xiugaizhuangtai:function(id,status){
        if(status == 0){
          status = ''
        }
        this.xiugai = {
          id:id,
          status:status
        }
        this.xiugaizhuangtailog = true
      },
      xiugaigo:function(){
        axios.post('/api/plan-market/admin/upstream/channel/order/status', this.xiugai)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              //获取列表
              this.getlist()
              this.xiugaizhuangtailog = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      xiugaibeizhu: function(id,val) {
        console.log(val)
        this.$prompt('请输入备注', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue:val
        }).then(({ value }) => {
          axios.post('/api/plan-market/admin/upstream/channel/order/remark', {
              id: id,
              remark: value
            })
            .then((response) => {
              this.getlist()
            })
        })

      },
      //获取列表
      getlist() {
        axios.get('/api/plan-market/admin/upstream/channel/order/list', {
            params: {
              item_type: this.item_type,
              shop_name: this.shopname,
              status:this.status
            }
          })
          .then((response) => {
            console.log(response.data.data)
            this.tableData = response.data.data
          })


      },
      //搜索下拉变化
      searchchange(e) {
        console.log(e)
        this.item_type = e
      },
      //搜索
      search() {
        //获取列表
        this.getlist()
      },
      //删除
      handleClick(id) {
        this.$confirm('是否确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/admin/shop/consumption/del', {
              id: id
            })
            .then((response) => {
              if (response.data.msg.code == 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                //获取列表
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //打开弹窗
      createwindow() {
        this.createzf = true
        this.addinfo.shop_name = ''
        this.addinfo.item_name = ''
        this.addinfo.item_type = ''
        this.addinfo.amount = ''
      },
      //检查店铺名称
      checkshop() {
        if (this.addinfo.shop_name == '') {
          this.$message.error("请输入店铺名称");
          return
        }
        axios.get('/api/plan-market/admin/shop/info', {
            params: {
              shop_name: this.addinfo.shop_name
            }
          })
          .then((response) => {
            console.log(response)
            if (response.data.msg.code == 0) {
              this.$message({
                message: '店铺名验证成功',
                type: 'success'
              });
            } else {
              this.$message.error("店铺不存在，请重新输入");
              this.addinfo.shop_name = ''
            }
          })
      },
      //创建支付订单
      adddd() {
        axios.post('/api/plan-market/admin/upstream/channel/create_order', this.addinfo)
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              //获取列表
              this.getlist()
              this.createzf = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    },
  }
</script>
<style scoped>
  .t_btn_box {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

  .t_table_box {
    padding: 20px;
  }
</style>
<style lang="scss" scoped>
  .admin_all {
    background: #EAEAEA;
    min-height: 100vh;
    padding: 0px;

    .logo {
      height: 30px;
    }

    .el-input {
      // width: 180px;
      // margin-right: 10px;
    }

    .flex {
      display: flex;
    }



    .zu {
      margin-top: 20px;

      .tit {
        background: #ccc;
        line-height: 45px;
        padding-left: 20px;
      }

      .con {
        background: #FFFFFF;
        padding: 20px;
        line-height: 30px;
        font-size: 14px;
      }

      .lli {
        margin-right: 30px;
        color: #666;
      }
    }
  }
</style>
